<script setup lang='ts'>
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();

const moduleList = [
  { name: '姿势识别', path: '/movenet', desc: 'TensorFlow.js、Canvas' },
  { name: '手势识别', path: '/gesture', desc: 'TensorFlow.js、ThreeJs' },
  { name: '人脸特征', path: '/face', desc: 'TensorFlow.js、ThreeJs' },
  { name: 'KIMI', path: '/kimi', desc: 'KIMI FREE API' },
];

const routerHandler = (path: string) => {
  const routeData = router.resolve(path);

  window.open(routeData.href, '_blank');
};
</script>

<template>
  <el-container>
    <el-main>
      <el-row :gutter="20" v-if="route.path === '/'">
        <el-col :span="8" :key="item.path" v-for="item in moduleList" :style="{ marginBottom: '20px' }">
          <el-card @click="routerHandler(item.path)">
            <template #header>
              <div class="card-header">{{ item.name }}</div>
            </template>
            <el-text class="mx-1" size="large">{{ item.desc }}</el-text>
          </el-card>
        </el-col>
      </el-row>
      <router-view v-else />
    </el-main>
  </el-container>
</template>
